<template>
  <div class="table-panel">
    <el-table
      v-loading="loading"
      :data="listData"
      :row-key="rowKey"
      :border="border"
      :height="height || null"
      v-bind="$attrs"
    >
      <el-table-column v-if="selectType === 'select'" type="selection" width="60" align="center" />
      <el-table-column v-if="showIndex" type="index" label="序号" width="60" align="center" />
      <slot></slot>
      <template #empty>
        <div style="text-align: center; padding: 30px">
          {{ emptyText }}
        </div>
      </template>
    </el-table>

    <el-pagination
      v-if="page"
      :page-size="curPageSize"
      :current-page="currentPage"
      :layout="pageLayout"
      :page-sizes="pageSizes"
      :pager-count="pagerCount"
      :total="rowTotal"
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
  import { defineComponent, toRefs } from 'vue'
  import { baseTableProps } from './props'
  import { useResponseHook } from './hooks/response'

  //父组件传入 props → setup(props) 拿到实际值 → toRefs 变成 ref → useResponseHook 执行所有逻辑 → return 给模板展示

  export default defineComponent({
    name: 'TablePanel',
    props: baseTableProps, //声明表格支持哪些props
    setup(props) {
      const getProps = toRefs(props)

      const { listData, loading, rowTotal, currentPage, curPageSize, search, refresh, setPageSize } =
        useResponseHook(getProps)

      function handleCurrentChange(page) {
        currentPage.value = page
        refresh()
      }

      function handleSizeChange(size) {
        setPageSize(size)
        currentPage.value = 1
        refresh()
      }

      return {
        listData,
        loading,
        rowTotal,
        currentPage,
        curPageSize,
        handleCurrentChange,
        handleSizeChange
      }
    }
  })
</script>

<style scoped>
  .table-panel {
    width: 100%;
  }

  /* 加粗 + 深色字体 */
  .table-panel .el-table_header.cell {
    font-weight: 600;
    color: #303133;
  }

  /* 表头背景色增强 */
  .table-panel .el-table__header {
    background-color: #f7f8fa !important;
  }

  /* 更明显的底部分割线 */
  .table-panel .el-table__header-wrapper {
    border-bottom: 2px solid #ebeef5;
  }

  .table-panel :deep(.el-pagination) {
    padding: 16px 0;
  }
</style>
